<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息拓展</title>
    <!-- css 样式引入 -->
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-table.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <!-- js引入 -->
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap-table.js"></script>
    <script type="text/javascript" src="../../js/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript" src="../../js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../../js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="js/expandUserInfo.js"></script>

</head>

<body>
	<!-- 标题 -->
	<table class="btbHead">
		<tr>
			<td style="width:25%;"><i class="fa fa-align-justify"></i>&nbsp;用户信息拓展</td>
			<td style="text-align: right;">
				<a href="#" id="addBtn" class="btn btn-info"  onclick="add()" data-toggle="modal" data-target="#myModal"><i class="fa fa-plus"></i>&nbsp;添加</a>
			</td>
		</tr>
	</table>
	
	<!-- 模糊查询条件 -->
	<form role="form" class="form-inline searchForm">
	  <div class="form-group">
	    <label for="name">查询条件</label>
	    <input type="text" class="form-control" id="keyWord" placeholder="请输入条件" style="width:250px;">
	    <a href="javascript:doQuery()" class="btn btn-default" ><i class="fa fa-search"></i></a>
	  </div>
	</form>
	
	<div class="slideLine" style="margin-top:10px;margin-bottom: 10px;"></div>
 
	<!-- 数据表格 -->
	<table id="expandUserTable" data-toggle="table" class="dataTable" data-pagination="true" >
	    <thead>
	        <tr>
	            <th data-field="userId" data-align="center">用户ID</th>
	            <th data-field="birthDay" data-align="center">出生日期</th>
	            <th data-field="idCard" data-align="center">身份证号</th>
	            <th data-field="email" data-align="center">邮箱</th>
	            <th data-field="recipientList" data-align="center">收货地址列表</th>
	            <th data-field="tradePassword" data-align="center">账户交易密码</th>
	            <th data-field="countMany" data-align="center">账户金额</th>
	            <th data-field="opraite" data-align="center" data-formatter="operateFormatter">操作</th>
	        </tr>
	    </thead>
	</table>
	
	<!--模态框-->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						新增用户拓展信息
					</h4>
				</div>
				<div class="modal-body" id="iptBox">
					<form class="form-horizontal form-inline commitForm" role="form">
						<table width="100%">
							<tr>
								<td width="50%" style="text-align: right;">用户ID&nbsp;<input id="userId" class="form-control" name="userId" type="text" value="" style="width:65%"></td>
								<td width="50%" style="text-align: right;">出生日期&nbsp;<input id="birthDay" class="form-control" name="birthDay" type="text" style="width:65%"></td>
							</tr>
							<tr>
								<td style="text-align: right;">身份证号&nbsp;<input id="" class="form-control" name="idCard" type="text" style="width:65%"></td>
								<td style="text-align: right;">邮箱&nbsp;<input id="" class="form-control" name="email" type="text" style="width:65%"></td>
								
							</tr>
							<tr>

								<td style="text-align: right;">账户交易密码&nbsp;<input id="phoneNum" class="form-control" name="tradePassword" type="text" style="width:65%"></td>
								<td style="text-align: right;">账户金额&nbsp;<input id="" class="form-control" name="countMany" type="text" style="width:65%"></td>
							</tr>
							<tr>
								<td style="text-align:left;width: 100%;" colspan="2">
									<span style="line-height: 25px;">收货地址</span>
									<table id="addressTable" data-toggle="table" class="dataTable" data-pagination="true" >
									    <thead>
									        <tr>
									            <th data-field="reciveName" data-align="center">收货人</th>
									            <th data-field="phone" data-align="center">手机号</th>
									            <th data-field="idCard" data-align="center">身份证号</th>
									            <th data-field="address" data-align="center">地址</th>
									            <th data-field="opraite" data-align="center" data-formatter="operateFormatter">操作</th>
									        </tr>
									    </thead>
									</table>
								</td>
							</tr>
						</table>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消
					</button>
					<button type="button" class="btn btn-primary" id="btnSave">
						确定
					</button>
				</div>
			</div> <!-- /.modal-content-->
		</div> <!--/.modal -->
	</div>
</body>

</html>